Basic30天學會行動App-第13章.進階的UI設計技巧

16th鐵人賽 ui設計技巧

因田木

2024-09-13 00:02:55

152 瀏覽

分享至

第13章: 進階的UI設計技巧

在行動應用程式開發中，使用者介面（UI）的設計至關重要。隨著使用者對美觀與功能的需求不斷提高，UI 設計不僅需要具備基本的元件擺放，更要具備高度的靈活性與適應性。本章將探討進階的 UI 設計技巧，包括自訂元件的使用、多螢幕適應以及動態介面生成，以便開發者能夠創建更加出色且具有吸引力的應用程式。

自訂元件的使用

在許多情況下，標準的 UI 元件無法完全滿足應用程式的需求。自訂元件（Custom Components）允許你根據具體需求來設計和擴展現有元件，從而提升應用程式的使用者體驗。

創建自訂元件
在 B4A 中，你可以通過擴展現有的類別來創建自訂元件。例如，如果你想要創建一個自訂的按鈕，該按鈕不僅具有標準的功能，還包括一些特殊的動畫效果或是圖示，你可以這樣實現：

Sub Class_Globals
    Private Root As Panel
    Private btnCustom As Button
End Sub

Public Sub Initialize
    Root.Initialize("")
    btnCustom.Initialize("btnCustom")
    btnCustom.Text = "Custom Button"
    Root.AddView(btnCustom, 0, 0, 200, 50)
End Sub

Public Sub GetView As Panel
    Return Root
End Sub

' 設置按鈕的動畫效果
Public Sub SetButtonAnimation
    btnCustom.Color = Colors.Red
    btnCustom.Text = "Clicked!"
    btnCustom.SetLayoutAnimated(500, btnCustom.Left, btnCustom.Top, btnCustom.Width + 10, btnCustom.Height + 10)
End Sub

' 按鈕點擊事件處理
Private Sub btnCustom_Click
    SetButtonAnimation
End Sub

這個範例創建了一個自訂按鈕，並添加了簡單的動畫效果。你可以將這個按鈕嵌入到任何介面中，並在需要時調用它的自訂方法。
2. 使用Designer工具創建自訂元件
B4A 的 Designer 工具允許你設計複雜的自訂元件，並將它們作為 Layout 的一部分進行重複使用。通過 Designer 工具，你可以將不同的元件組合在一起，並保存為一個 Layout 檔案。在程式碼中可以動態加載這些 Layout，並對其進行調整。

Sub LoadCustomComponent
    Dim p As Panel
    p.Initialize("")
    Activity.AddView(p, 10, 10, 300, 100)
    p.LoadLayout("CustomComponentLayout")
    
    ' 在這裡，你可以訪問自訂元件中的子元件
    Dim lbl As Label = p.GetView(0)
    lbl.Text = "Updated Text"
End Sub

這樣，可以很容易地在不同的頁面中重複使用設計過的自訂元件，而無需重新編寫程式碼。

多螢幕適應

隨著行動裝置的種類和螢幕尺寸的多樣化，設計一個能夠適應多種螢幕尺寸的 UI 是非常重要的。B4A 提供了多種工具和技巧來幫助你實現這一目標。

使用AutoScale
B4A 中的 AutoScale 功能允許你根據裝置的螢幕尺寸自動調整 UI 元件的大小。這樣可以確保你的應用程式在不同尺寸的裝置上都能保持良好的顯示效果。

Sub Activity_Create(FirstTime As Boolean)
    ' 自動調整介面的尺寸
    Activity.LoadLayout("MainLayout")
    AutoScaleAll
End Sub

AutoScale 功能會根據裝置的螢幕密度（DPI）自動調整 Layout 中所有元件的大小和位置。
2. 動態調整UI
除了使用 AutoScale，你還可以在程式碼中動態調整 UI 元件的大小和位置，以適應不同的螢幕尺寸。這種方法允許你根據具體的裝置特性做出更精細的調整。

Sub AdjustUIForScreenSize
    Dim screenWidth As Int = GetDeviceLayoutValues.Width
    Dim screenHeight As Int = GetDeviceLayoutValues.Height
    
    If screenWidth > 600 Then
        ' 平板裝置：調整介面佈局
        btnCustom.Width = 300
        btnCustom.Height = 100
    Else
        ' 手機裝置：使用默認佈局
        btnCustom.Width = 200
        btnCustom.Height = 50
    End If
End Sub

這樣的程式碼可以根據裝置的螢幕寬度動態調整 UI 元件的大小，使得應用程式在各種裝置上都能提供最佳的使用者體驗。

動態介面生成

在某些情況下，你可能需要根據使用者的操作或應用程式的狀態來動態生成介面。動態生成介面可以讓應用程式更加靈活，並能適應更多不同的使用場景。

動態添加UI元件
你可以在程式執行期間根據條件動態生成 UI 元件，這些元件可以根據使用者的輸入或外部資料來決定。

Sub AddDynamicButtons
    For i = 1 To 5
        Dim btn As Button
        btn.Initialize("dynamicBtn")
        btn.Text = "Button " & i
        btn.Tag = i
        Activity.AddView(btn, 10, i * 60, 200, 50)
    Next
End Sub

Sub dynamicBtn_Click
    Dim btn As Button = Sender
    Log("Clicked button: " & btn.Tag)
End Sub

在這個範例中，我們動態生成了 5 個按鈕，並為每個按鈕設置了不同的標籤（Tag）。當使用者點擊這些按鈕時，程式會根據按鈕的標籤來識別是哪一個按鈕被點擊。
2. 動態加載Layouts
除了動態生成個別的元件，你還可以根據程式狀態或使用者操作動態加載不同的 Layout。

Sub LoadLayoutDynamically(layoutName As String)
    Activity.LoadLayout(layoutName)
End Sub

Sub btnSwitchLayout_Click
    If SomeCondition Then
        LoadLayoutDynamically("Layout1")
    Else
        LoadLayoutDynamically("Layout2")
    End If
End Sub

這種方法允許你根據需要在不同的狀態下展示不同的介面，從而增加應用程式的靈活性和動態性。
範例程式：綜合應用進階UI技巧
以下是一個綜合範例，展示了如何將自訂元件、多螢幕適應和動態介面生成技術結合在一起，創建一個具備高適應性和靈活性的應用程式。

Sub Process_Globals
    ' 全域變數
End Sub

Sub Globals
    Dim btnCustom As Button
End Sub

Sub Activity_Create(FirstTime As Boolean)
    ' 動態加載主Layout
    Activity.LoadLayout("MainLayout")
    
    ' 動態生成按鈕
    AddDynamicButtons
    
    ' 根據螢幕大小調整介面
    AdjustUIForScreenSize
End Sub

Sub AddDynamicButtons
    For i = 1 To 3
        Dim btn As Button
        btn.Initialize("dynamicBtn")
        btn.Text = "Dynamic Button " & i
        btn.Tag = i
        Activity.AddView(btn, 10, i * 80, 300, 60)
    Next
End Sub

Sub AdjustUIForScreenSize
    If GetDeviceLayoutValues.Width > 600 Then
        ' 平板裝置：調整按鈕大小
        For Each v As View In Activity.GetAllViewsRecursive
            If v Is Button Then
                v.Width = 400
                v.Height = 100
            End If
        Next
    End If
End Sub

Sub dynamicBtn_Click
    Dim btn As Button = Sender
    ToastMessageShow("Clicked: " & btn.Text, False)
End Sub